<template>
	<!-- 书籍领取 -->
	<view>
		<uni-navbar :title="'书籍领取'"></uni-navbar>
		<ul class="shuji-one">
			<li>
				<span>手机号码</span>
				<span class="jione-two">13465625585</span>
			</li>
			<li>
				<span>收件人姓名</span>
				<input class="jione-two" type="text" placeholder="请输入收件人姓名">
			</li>
			<li @click="sshow=true">
				<span>专业</span>
				<div class="jione-two">
					<span>{{zhix}}</span>
					>
				</div>
			</li>
			<u-select v-model="sshow" :list="list1" @confirm="conse"></u-select>
			<li @click="show=true">
				<span>领取方式</span>
				<div class="jione-two">
					<span>{{xuze}}</span>
					>
				</div>
			</li>
			<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
			<li @click='showw=true'>
				<span>所有地区</span>
				<div class="jione-two">
					<span>{{dezhi}}</span>
					>
				</div>
			</li>
			<u-picker mode="region" @confirm="confi" v-model="showw" :area-code='["13", "1303", "130304"]'></u-picker>
		</ul>
		<div class="shuji-two">
			<textarea placeholder="请输入详细收获地址"></textarea>
		</div>
		<div class="shuji-thee">
			<span>备注</span>
			<input type="text" placeholder="请输入备注">
		</div>
		<button>提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showw: false,
				dezhi: '选择',
				zhix: '执业',
				sshow: false,
				list1: [{
						value: '1',
						label: '选择'
					},
					{
						value: '2',
						label: '邮寄'
					},
					{
						value: '3',
						label: '自取'
					}
				],
				xuze: '邮寄',
				show: false,
				list: [{
						value: '1',
						label: '选择'
					},
					{
						value: '2',
						label: '邮寄'
					},
					{
						value: '3',
						label: '自取'
					}
				],
			};
		},
		methods: {
			confi(a) {
				this.dezhi = a.province.label + ',' + a.city.label + ',' + a.area.label
				console.log(this.dezhi);
				this.dezhi = dez
			},
			conse() {
				this.zhix = e[0].label
			},
			confirm(e) {
				this.xuze = e[0].label
			}
		}
	}
</script>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	page {
		background-color: #eee;
	}

	.shuji-one {
		li {
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			margin-top: 5rpx;

			span {
				font-size: 24rpx;
			}

			input {
				width: 195rpx;
				font-size: 24rpx;
			}

			.jione-two {
				color: #999999;

				span {
					margin-left: 5rpx;
					color: #999999;
				}
			}
		}
	}

	.shuji-two {
		width: 750rpx;
		height: 315rpx;
		margin-top: 10rpx;
		background-color: #fff;

		textarea {
			width: 710rpx;
			height: 275rpx;
			padding: 20rpx;
			font-size: 24rpx;
		}
	}

	.shuji-thee {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 5rpx;
		background-color: #fff;
		padding: 30rpx;

		span {
			font-size: 23rpx;
		}

		input {
			font-size: 24rpx;
			width: 123rpx;
		}
	}

	button {
		width: 687rpx;
		height: 65rpx;
		background-color: #0590FE;
		border-radius: 8rpx;
		text-align: center;
		margin-top: 40rpx;
		color: #fff;
		font-size: 25rpx;
	}
</style>
